<include file="public@header" />
</head>
<body>
	<div class="wrap">
		<form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('Goods/GoodsDetailsPost')}">

			<div id="form-item-box">
				<foreach name="$list" item="v">
				<div class="form-group">
					<label class="col-sm-2 control-label">属性</label>
					<div class="col-md-6 col-sm-10">
							<input type="text" class="form-control" value="{$v.name}" name="attr[]">
					</div>
				</div>
				</foreach>
				<div class="form-group">
					<label class="col-sm-2 control-label"></label>
					<div class="col-md-6 col-sm-10">
						<button type="button" onclick="addFormItem()" class="btn btn-default">增加表单项</button>
					</div>
				</div>

				<input type="hidden" name="goods_id" value="{$goods_id}" />


			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-primary js-ajax-submit">添加</button>
					<a class="btn btn-default" href="javascript:history.back(-1);">返回</a>
				</div>
			</div>
		</form>
	</div>
	<script src="__STATIC__/js/admin.js?v={$_static_version}"></script>
	<script>
		function addFormItem(){
			//获取大盒子
			const formItemBox = document.getElementById('form-item-box')

			//创建input
			const input = document.createElement("input")
			input.type = 'text'
			input.className = 'form-control'
			input.name = 'attr[]'

			//创建删除按钮
			const removeButton = document.createElement('button')
			removeButton.className = 'btn btn-danger btn-sm'
			removeButton.innerText = '移除'
			removeButton.type = 'button'
			removeButton.onclick = function (){
				removeFormItem(this)
			}

			//创建input,button的父元素
			const inputParent = document.createElement("div")
			inputParent.className = 'col-md-6 col-sm-10'
			inputParent.style.display = 'flex'
			inputParent.appendChild(input)
			inputParent.appendChild(removeButton)

			//创建label标签
			const label = document.createElement("label")
			label.className = 'col-sm-2 control-label'
			label.innerText = '属性'

			//创建最外层的div
			const formGroupDiv = document.createElement("div")
			formGroupDiv.className = 'form-group'
			formGroupDiv.appendChild(label)
			formGroupDiv.appendChild(inputParent)
			formItemBox.appendChild(formGroupDiv)
		}

		//移除表单项
		function removeFormItem(button){
			//获取大盒子
			const formItemBox = document.getElementById('form-item-box')
			formItemBox.removeChild(button.parentNode.parentNode)
		}
	</script>
</body>
</html>
